<template>
  <div>
    <Row class="formRow">
      <Col span="3" class="rightRow">
        <span class="ModelInputTitle width100">体检套餐名称</span>
      </Col>
      <Col span="4" class="leftRow">
        <Input v-model="formInline.setmealName" placeholder="体检套餐名称" clearable style="width: 100%" size="large"></Input>
      </Col>
      <Col span="2" class="rightRow">
        <span class="ModelInputTitle">机构类型</span>
      </Col>
      <Col span="4" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.hospitalLevel" placeholder="机构类型">
          <Option v-for="o in hospitalOPtions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
        </Select>
      </Col>
      <Col span="2" class="rightRow">
        <span class="ModelInputTitle">价格区间</span>
      </Col>
      <Col span="3" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.priceRange" placeholder="价格区间">
          <Option v-for="o in priceRangeOptions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
        </Select>
      </Col>
      <Col span="2" class="rightRow">
        <span class="ModelInputTitle">年龄类型</span>
      </Col>
      <Col span="4" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.ageType" placeholder="年龄类型">
          <Option v-for="o in ageOptions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
        </Select>
      </Col>

    </Row>
    <Row  class="formRow" style="margin-top: 20px">
      <Col span="3" class="rightRow">
        <span class="ModelInputTitle width100">体检类型</span>
      </Col>
      <Col span="4" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.physicalExaminationType" placeholder="体检类型">
          <Option v-for="o in physicalExaminationOptions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
        </Select>
      </Col>
      <Col span="2" class="rightRow">
        <span class="ModelInputTitle width100">性别</span>
      </Col>
      <Col span="4" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.sex" placeholder="性别">
          <Option  value="1" >男</Option>
          <Option  value="0" >女</Option>
        </Select>
      </Col>
      <Col span="2" class="rightRow">
        <span class="ModelInputTitle width100">省</span>
      </Col>
      <Col span="2" class="leftRow">
        <Select  size="large" style="width:100%"  placeholder="省" @on-change="pchange">
          <Option v-for="p in provinceArr"  :value="p.regionCode" :key="p.id">{{p.regionName}}</Option>
        </Select>
      </Col>
      <Col span="1" class="rightRow">
        <span class="ModelInputTitle width100">市</span>
      </Col>
      <Col span="2" class="leftRow">
        <Select  size="large" style="width:100%" v-model="formInline.cityId" placeholder="市">
          <Option v-for="c in cityArr"  :value="c.id" :key="c.id">{{c.regionName}}</Option>
        </Select>
      </Col>
      <Col span="4" class="leftRow textCenter">
        <Button type="primary" @click="onSubmit">查询</Button>
        <Button type="primary" @click="resetForm">重置</Button>
        <Button type="primary" @click="onAdd">添加</Button>
      </Col>
    </Row>

    <Table :data="tableData" :columns="cloums" stripe :loading="loading"  style="margin-top: 20px"></Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right;">
        <Page :total="total" :placement="placement" :current="1" @on-change="changePage" show-total show-elevator show-sizer @on-page-size-change="changeSize"></Page>
      </div>
    </div>

    <Modal
      v-model="add"
      title="添加"
      @on-ok="addOk"
      @on-cancel="cancel('您取消了操作')" width="600">
      <Row>
        <Col span="24"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>体检套餐名称</span><Input v-model="addForm.setmealName" style="width: 485px" ></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="12"> <span class="ModelInputTitle">体检类型</span>
          <Select  size="large" style="width:200px" v-model="addForm.physicalExaminationType" placeholder="体检类型">
            <Option v-for="o in physicalExaminationOptions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
          </Select>
        </Col>
        <Col span="12"> <span class="ModelInputTitle">价格</span><Input v-model="addForm.pirce" style="width: 200px" ></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="12"> <span class="ModelInputTitle">所属医院</span><Input v-model="addForm.labName"  style="width: 200px" ></Input></Col>
        <Col span="12"> <span class="ModelInputTitle">体检时间</span><Input v-model="addForm.physicalExaminationTime" style="width: 200px" ></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="12"> <span class="ModelInputTitle">省</span>
          <Select  size="large" style="width:200px"  placeholder="省" v-model="addForm.province"@on-change="pchange">
            <Option v-for="p in provinceArr"  :value="p.regionCode" :key="p.id">{{p.regionName}}</Option>
          </Select>
        </Col>
        <Col span="12"> <span class="ModelInputTitle">市</span>
          <Select  size="large" style="width:200px" v-model="addForm.cityid" placeholder="市">
            <Option v-for="c in cityArr"  :value="c.id" :key="c.id">{{c.regionName}}</Option>
          </Select>
        </Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="12"> <span class="ModelInputTitle">是否有效</span><Select   v-model="addForm.valid" style="width: 200px">
          <Option  value="1" >是</Option>
          <Option  value="0" >否</Option>
        </Select></Col>
        <Col span="12">   <span class="ModelInputTitle">适宜人群</span><Input v-model="addForm.suitablePopulation"  style="width: 200px"></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="24">   <span class="ModelInputTitle">机构类型</span>
          <Select  size="large" style="width:479px" v-model="addForm.labType" placeholder="机构类型">
            <Option v-for="o in hospitalOPtions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
          </Select>
        </Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="24">   <span class="ModelInputTitle">医院地址</span><Input v-model="addForm.address"  style="width: 485px"></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="24">   <span class="ModelInputTitle">图片地址</span><Input v-model="addForm.pictureurl"  style="width: 485px"></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="24">   <span class="ModelInputTitle">关键字</span><Input v-model="addForm.keyWords"  style="width: 485px"></Input></Col>
      </Row>
      <Row style="margin-top: 20px">
        <Col span="24">   <span class="ModelInputTitle">介绍</span><Input v-model="addForm.introduce" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
      </Row>

    </Modal>
    <Modal
    v-model="edit"
    title="编辑"
    @on-ok="editOk"
    @on-cancel="cancel('您取消了操作')" width="600">
    <Row>
      <Col span="24"> <span class="ModelInputTitle"><Icon type="ios-medical" color="red"></Icon>体检套餐名称</span><Input v-model="editForm.setmealName" style="width: 485px" ></Input></Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="12"> <span class="ModelInputTitle">体检类型</span>
        <Select  size="large" style="width:200px" v-model="editForm.physicalExaminationType" placeholder="体检类型">
          <Option v-for="o in physicalExaminationOptions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
        </Select>
      </Col>
      <Col span="12"> <span class="ModelInputTitle">价格</span><Input v-model="editForm.pirce" style="width: 200px" ></Input></Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="12"> <span class="ModelInputTitle">所属医院</span><Input v-model="editForm.labName"  style="width: 200px" ></Input></Col>
      <Col span="12"> <span class="ModelInputTitle">体检时间</span><Input v-model="editForm.physicalExaminationTime" style="width: 200px" ></Input></Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="12"> <span class="ModelInputTitle">省</span>
        <Select  size="large" style="width:200px"  placeholder="省" v-model="editForm.province" @on-change="pchange">
          <Option v-for="p in provinceArr"  :value="p.regionCode" :key="p.id">{{p.regionName}}</Option>
        </Select>
      </Col>
      <Col span="12"> <span class="ModelInputTitle">市</span>
        <Select  size="large" style="width:200px" v-model="editForm.cityid" placeholder="市">
          <Option v-for="c in cityArr"  :value="c.id" :key="c.id">{{c.regionName}}</Option>
        </Select>
      </Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="12"> <span class="ModelInputTitle">是否有效</span><Select   v-model="editForm.valid" style="width: 200px">
        <Option  value="1" >是</Option>
        <Option  value="0" >否</Option>
      </Select></Col>
      <Col span="12">   <span class="ModelInputTitle">适宜人群</span><Input v-model="editForm.suitablePopulation"  style="width: 200px"></Input></Col>
    </Row>
      <Row style="margin-top: 20px">
        <Col span="24">   <span class="ModelInputTitle">机构类型</span>
          <Select  size="large" style="width:479px" v-model="editForm.labType" placeholder="机构类型">
            <Option v-for="o in hospitalOPtions"  :value="o.dataName" :key="o.id">{{o.dataName}}</Option>
          </Select>
        </Col>
      </Row>
    <Row style="margin-top: 20px">
      <Col span="24">   <span class="ModelInputTitle">医院地址</span><Input v-model="editForm.address"  style="width: 485px"></Input></Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="24">   <span class="ModelInputTitle">图片地址</span><Input v-model="editForm.pictureurl"  style="width: 485px"></Input></Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="24">   <span class="ModelInputTitle">关键字</span><Input v-model="editForm.keyWords"  style="width: 485px"></Input></Col>
    </Row>
    <Row style="margin-top: 20px">
      <Col span="24">   <span class="ModelInputTitle">介绍</span><Input v-model="editForm.introduce" type="textarea" :autosize="{minRows: 5,maxRows: 20}"  style="width: 485px"></Input></Col>
    </Row>

  </Modal>

    <Modal
      v-model="item"
      title="套餐项目"
      @on-ok="itemOk"
      @on-cancel="cancel('您取消了操作')" width="1000">
          <Row class="ivu-row-flex-bottom hasBottom" v-for="item in itemList" :key="item.id">
            <Col span="4" class="bottomRight">{{item.type}}</Col> <Col span="4"  class="bottomRight">{{item.projectName}}</Col> <Col span="16"  class="bottomRight">{{item.checkmd}}</Col>
          </Row>

    </Modal>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from "axios";
  import {dicType} from  './../../api/common'
    export default {
        name: "PhysicalExamination",
        data() {
          return {
            itemList:[],
            item:false,
            formInline:{
              setmealName:"",//体检套餐名称
              hospitalLevel:"",//
              priceRange:"",//
              ageType:"",//医院地址
              physicalExaminationType:"",//体检类型
              sex:"",
              cityId:""
            },
            add:false,
            addForm:{
              setmealName:"",
              physicalExaminationType:"",
              pirce:"",
              labName:"",
              physicalExaminationTime:"",
              cityid:"",
              valid:"",
              suitablePopulation:"",
              address:"",
              pictureurl:"",
              keyWords:"",
              introduce:"",
              province:"",
              labType:""
            },
            edit:false,
            editForm:{
              setmealName:"",
              physicalExaminationType:"",
              pirce:"",
              labName:"",
              physicalExaminationTime:"",
              cityid:"",
              valid:"",
              suitablePopulation:"",
              address:"",
              pictureurl:"",
              keyWords:"",
              introduce:"",
              id:"",
              province:"",
              labType:""
            },
            tableData:[],
            loading:true,
            page:1,
            size:10,
            total:0,
            placement:'bottom',
            hospitalOPtions:[],//机构类型
            priceRangeOptions:[],//价格区间
            physicalExaminationOptions:[],//体检类型
            ageOptions:[],//年龄类型
            provinceArr:[],//省
            cityArr:[],
            cloums:[
              {
                title: '体检套餐名称',
                key: 'setmealName',
                width:300,
                align:"center"
              },
              {
                title: '适宜人群',
                key: 'suitablePopulation',
                width:120,
                align:"center",

              },
              {
                title: '所属医院',
                key: 'labName',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '医院地址',
                key: 'address',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '关键字',
                key: 'keyword',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '机构类型',
                key: 'labType',
                width:120,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '体检时间',
                key: 'physicalExaminationTime',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '价格',
                key: 'pirce',
                width:180,
                align:"center"
              },
              {
                title: '城市',
                key: 'regionName',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '体检类型',
                key: 'physicalExaminationType',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '介绍',
                key: 'introduce',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '是否有效',
                key: 'valid',
                width:180,
                align:"center"
              },
              {
                title: '创建人',
                key: 'creator',
                width:180,
                align:"center"
              },
              {
                title: '修改人',
                key: 'updater',
                width:180,
                align:"center"
              },
              {
                title: '图片地址',
                key: 'pictureurl',
                width:180,
                align:"center",
                ellipsis:"true"
              },
              {
                title: '操作',
                width:180,
                align:"center",
                fixed:"right",
                render:(h,params)=>{
                  return h('div',[
                    h('Button',{
                      props:{
                        type:"primary",
                        size:"small"
                      },
                      style:{
                        marginRight:'5px'
                      },
                      on:{
                        click:()=>{
                          console.log(params)
                          this.edit = true;
                          this.editForm.setmealName = params.row.setmealName;
                          this.editForm.physicalExaminationType = params.row.physicalExaminationType;
                          this.editForm.pirce = params.row.pirce;
                          this.editForm.labName = params.row.labName;
                          this.editForm.physicalExaminationTime = params.row.physicalExaminationTime;

                          this.editForm.province = params.row.regionCode;

                          this.editForm.cityid = params.row.cityid;
                          this.editForm.valid = params.row.valid == "是"?"1":"0";
                          this.editForm.suitablePopulation = params.row.suitablePopulation;
                          this.editForm.address = params.row.address;
                          this.editForm.pictureurl = params.row.pictureurl;
                          this.editForm.keyWords = params.row.keyword;
                          this.editForm.introduce = params.row.introduce;
                          this.editForm.id= params.row.id;
                          this.editForm.labType = params.row.labType;
                        }
                      }
                    },"编辑"),
                    h('Button',{
                      props:{
                        type:"success",
                        size:"small"
                      },
                      on:{
                        click:()=>{
                          console.log(params.row.id);
                          var qs = require("qs");
                          var param = qs.stringify({
                            setMealId:params.row.id
                          });
                          //console.log(param)
                          axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
                          axios.post('/meal/selectSetMealDetailById',param).then((res)=>{
                            console.log(res.data)
                            if(res.data.code == "000000"){
                              this.item = true;
                              this.itemList = res.data.data;
                            }else{
                              alert(res.data.msg)
                            }
                          })

                        }
                      }
                    },"查看项目"),
                  ])
                }
              }
            ]

          }
        },
        mounted(){
          this.init();
          this.getData();

        },
        methods:{
          getData(){
            let qs = require('qs');
            let param = qs.stringify({
              dictType:"hospital_level"
            });
            dicType(param).then((result)=>{
              if(result.code == "000000"){
                  this.hospitalOPtions = result.data;
              }else {
                this.$Message.error({title:result.msg})
              }
            });
            //价格区间
            let param1 = qs.stringify({
              dictType:"price_range"
            });
            dicType(param1).then((result)=>{
              console.log(result);
              if(result.code == "000000"){
                this.priceRangeOptions = result.data;
              }else {
                this.$Message.error({title:result.msg})
              }
            });

            //体检类型
            let param2 = qs.stringify({
              dictType:"physical_examination_type"
            });
            dicType(param2).then((result)=>{
              console.log(result);
              if(result.code == "000000"){
                this.physicalExaminationOptions = result.data;
              }else {
                this.$Message.error({title:result.msg})
              }
            });
            //年龄类型
            let param3 = qs.stringify({
              dictType:"age_type"
            });
            dicType(param3).then((result)=>{
              console.log(result);
              if(result.code == "000000"){
                this.ageOptions = result.data;
              }else {
                this.$Message.error({title:result.msg})
              }
            });

            axios.post("/common/provinceList").then((res)=>{
              if(res.data.code == "000000"){
                this.provinceArr = res.data.data;
              }else{
                this.$Notice.error({title:res.data.msg})
              }
            });
          },

          init(){

            var qs = require("qs");
            var param = qs.stringify({
              page:this.page,
              pageSize:this.size,
              setmealName:this.formInline.setmealName,
              physicalExaminationType:this.formInline.physicalExaminationType,
              hospitalLevel:this.formInline.hospitalLevel,//
              priceRange:this.formInline.priceRange,//
              ageType:this.formInline.ageType,//
              sex:this.formInline.sex?(this.formInline.sex = this.formInline.sex=="1"?"男":"女"):"",
              cityId:this.formInline.cityId
            });
            //console.log(param)
           axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
            axios.post('/meal/getSetMeal',param).then((res)=>{
              console.log(res.data)
              if(res.data.code == "000000"){
                  this.loading = false;
                  this.total = res.data.count;
                  for(let i in res.data.data){
                    res.data.data[i].valid =  res.data.data[i].valid == "1" ? "是":"否"
                    // console.log(i)
                  }
                  this.tableData = res.data.data;
              }else{
                alert(res.data.msg)
              }
            })

          },
          onSubmit() {
              this.page = 1;
              this.size = 10;
              this.init();
          },
          resetForm(){
            this.formInline.setmealName = "";
            this.formInline.physicalExaminationType = "";
            this.formInline.hospitalLevel = "";//
            this.formInline.priceRange = "";//
            this.formInline.ageType = "";//
            this.formInline.sex = "";

            this.formInline.cityId = "";
            this.init();
          },
          onAdd(){
            this.add = true;
          },
          changePage(page){
            this.page = page;
            this.loading = true;
            this.init()
          },
          changeSize(size){
            this.size = size;
            this.placement = size>=20?"top":"bottom";
            this.loading = true;
            this.init();
          },
          cancel (msg) {
            this.$Notice.info({title:msg});
          },
          addOk(){
            var qs = require("qs");
            var param = qs.stringify({
              setmealName:this.addForm.setmealName,
              pictureurl:this.addForm.pictureurl,
              suitablePopulation:this.addForm.suitablePopulation,
              labName:this.addForm.labName,
              valid:this.addForm.valid,
              address:this.addForm.address,
              physicalExaminationType:this.addForm.physicalExaminationType,
              keyword:this.addForm.keyWords,
              physicalExaminationTime:this.addForm.physicalExaminationTime,
              pirce:this.addForm.pirce,
              cityId:this.addForm.cityid,
              introduce:this.addForm.introduce,
              labType:this.addForm.labType
            });
            //console.log(param)
            axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
            axios.post('/meal/addSetMeal',param).then((res)=>{
              console.log(res)
              if(res.data.code == "000000"){
                this.$Notice.success({title:'添加成功'});
                this.init();
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            })
          },
          editOk(){
            var qs = require("qs");
            var param = qs.stringify({
              setmealName:this.editForm.setmealName,
              pictureurl:this.editForm.pictureurl,
              suitablePopulation:this.editForm.suitablePopulation,
              labName:this.editForm.labName,
              valid:this.editForm.valid,
              address:this.editForm.address,
              physicalExaminationType:this.editForm.physicalExaminationType,
              keyword:this.editForm.keyWords,
              physicalExaminationTime:this.editForm.physicalExaminationTime,
              pirce:this.editForm.pirce,
              cityId:this.editForm.cityid,
              introduce:this.editForm.introduce,
              id:this.editForm.id,
              labType:this.editForm.labType
          });
            //console.log(param)
            axios.defaults.headers.common['Authorization'] = sessionStorage.getItem("token");
            axios.post('/meal/updateSetMeal',param).then((res)=>{
              console.log(res)
              if(res.data.code == "000000"){
                this.$Notice.success({title:'修改成功'});
                this.init();
              }else{
                this.$Notice.error({title:res.data.msg});
              }
            })
          },
          itemOk(){

          },
          pchange(p){
            console.log(p)
            if(p){
              var qs = require("qs");
              var param = qs.stringify({
                regionCode:p
              })
              axios.post("/common/regionListByRegionCode",param).then((res)=>{
                if(res.data.code =="000000"){
                  this.cityArr = res.data.data;
                }else{
                  this.$Notice.error({title:res.data.msg})
                }
              });
            }
          }
        }
    }
</script>

<style scoped>
  .textCenter{
    text-align: center;
  }
  .width100{
    width: 100px;
  }
  .hasBottom{
    border-bottom: 1px solid #ddd;
  }
  .bottomRight{
    border-right: 1px solid #ddd;
    padding: 3px;
    height: 50px;
  }
</style>
